import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:live_music/models/topic_detail_model.dart';
import 'package:live_music/pages/topic/index.dart';
import 'package:live_music/pages/topic/topic_detail.dart';
import 'package:live_music/services/topicService.dart';
import 'package:live_music/utils/cgq_utils.dart';

class TopicSquare extends StatefulWidget {
  TopicSquare({Key key}) : super(key: key);

  @override
  _TopicSquareState createState() => _TopicSquareState();
}

class _TopicSquareState extends State<TopicSquare>
    with SingleTickerProviderStateMixin {
  List<TopicDetailModel> _hotTopicListModel;
  List<TopicDetailModel> _recentTopicListModel;
  int pageNo = 1;
  int pageSize = 10;
  bool hasMore = true;
  @override
  void initState() {
    super.initState();
    getData();
  }

  getData() async {
    this.getRecentTopic();
    this.getHotTopic();
  }

  getRecentTopic({bool replace = true}) async {
    try {
      Map<String, dynamic> data = {
        "pageNo": pageNo,
        "pageSize": pageSize,
        "name": ""
      };
      Map<String, dynamic> result = await TopicService.queryTopic(data);
      List<dynamic> topicList = result['body'];
      TopicListModel topicListModel = TopicListModel.fromJson(topicList);
      setState(() {
        pageNo++;
        hasMore = pageSize == topicListModel.list.length;
        if (replace) {
          _recentTopicListModel = topicListModel.list;
        } else {
          _recentTopicListModel.addAll(topicListModel.list);
        }
      });
    } catch (e) {}
  }

  getHotTopic({bool replace = true}) async {
    try {
      Map<String, dynamic> data = {"pageNo": pageNo, "pageSize": pageSize};
      Map<String, dynamic> result = await TopicService.queryHotTopic(data);
      List<dynamic> topicList = result['body'];
      TopicListModel topicListModel = TopicListModel.fromJson(topicList);
      setState(() {
        pageNo++;
        hasMore = pageSize == topicListModel.list.length;
        if (replace) {
          _hotTopicListModel = topicListModel.list;
        } else {
          _hotTopicListModel.addAll(topicListModel.list);
        }
      });
    } catch (e) {}
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
          child: Text(
            "热门话题",
            style: TextStyle(
              color: Colors.black,
              fontSize: 20,
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: PageView.builder(
            controller: PageController(viewportFraction: 0.9),
            itemBuilder: (context, index) {
              var bean = _hotTopicListModel[index];
              return GestureDetector(
                onTap: () {
                  Get.to(TopicDetailPage(topicItem: bean));
                },
                child: Hero(
                  tag: bean.coverUrl,
                  child: Stack(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 30, right: 10),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(5),
                            child: Container(
                              child: CgqUtils.imageCache(
                                bean.coverUrl,
                                fit: BoxFit.cover,
                              ),
                              width: MediaQuery.of(context).size.width,
                            )),
                      ),
                      Positioned(
                        //  bottom:0,
                        // left:0,
                        child: Padding(
                            padding:
                                const EdgeInsets.only(bottom: 30, right: 10),
                            child: ClipRRect(
                                borderRadius: BorderRadius.circular(5),
                                child: Container(
                                  color: Colors.black.withOpacity(.22),
                                  width: MediaQuery.of(context).size.width,
                                ))),
                      ),
                      Center(
                          child: Container(
                        width: 250,
                        margin: EdgeInsets.only(bottom: 47),
                        alignment: Alignment.center,
                        child: Text(
                          "#" + bean.name + "#",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 20,
                          ),
                        ),
                      )),
                      Positioned(
                        bottom: 60,
                        left: 15,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              color: Colors.transparent,
                              child: Text(
                                "@" + bean.createUserName,
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 15,
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              );
            },
            itemCount: _hotTopicListModel.length,
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "最新话题",
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                ),
              ),
              InkWell(
                child: Text(
                  "查看全部",
                  style: TextStyle(
                    color: Colors.deepOrange,
                    fontSize: 14,
                  ),
                ),
                onTap: () {
                  Get.to(TopicIndexPage());
                },
              )
            ],
          ),
        ),
        Expanded(
          flex: 1,
          child: ListView.builder(
            padding: EdgeInsets.symmetric(horizontal: 15),
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              var bean = _recentTopicListModel[index];
              return GestureDetector(
                onTap: () {
                  Get.to(TopicDetailPage(topicItem: bean));
                },
                child: Hero(
                  tag: bean.coverUrl,
                  child: Stack(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 30, right: 10),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(5),
                            child: Container(
                              child: CgqUtils.imageCache(
                                bean.coverUrl,
                                fit: BoxFit.cover,
                              ),
                              width: 170,
                            )),
                      ),
                      Positioned(
                        //  bottom:0,
                        // left:0,
                        child: Padding(
                            padding:
                                const EdgeInsets.only(bottom: 30, right: 10),
                            child: ClipRRect(
                                borderRadius: BorderRadius.circular(5),
                                child: Container(
                                  color: Colors.black.withOpacity(.22),
                                 width: 170,
                                ))),
                      ),
                      Center(
                          child: Container(
                        width: 170,
                        margin: EdgeInsets.only(bottom: 37),
                        alignment: Alignment.center,
                        child: Text(
                          "#" + bean.name + "#",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 15,
                          ),
                        ),
                      )),
                      Positioned(
                        bottom: 40,
                        left: 10,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Material(
                              color: Colors.transparent,
                              child: Text(
                              "@" + bean.createUserName,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize:12,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
            itemCount: _recentTopicListModel.length,
          ),
        )
      ],
    );
  }
}
